<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="尊耀汇年会">
    <meta name="keywords" content="尊耀汇、年会">
    <!--<meta name="viewport" content="width=device-width, initial-scale=1">-->
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
    <title>我的卡片</title>

    <!-- Set render engine for 360 browser -->
    <meta name="renderer" content="webkit">

    <!-- No Baidu Siteapp-->
    <meta http-equiv="Cache-Control" content="no-siteapp"/>

    <link rel="icon" type="image/png" href="img/card/favicon.png">

    <!-- Add to homescreen for Chrome on Android -->
    <meta name="mobile-web-app-capable" content="yes">
    <link rel="icon" sizes="192x192" href="img/card/favicon.png">

    <!-- Add to homescreen for Safari on iOS -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-title" content="Amaze UI"/>
    <link rel="apple-touch-icon-precomposed" href="img/card/favicon.png">

    <!-- Tile icon for Win8 (144x144 + tile color) -->
    <meta name="msapplication-TileImage" content="img/card/favicon.png">
    <meta name="msapplication-TileColor" content="#0e90d2">

    <link rel="stylesheet" href="../../common/amazeui-2.7.2/assets/css/amazeui.min.css">
    <link rel="stylesheet" href="../../common/amazeui-2.7.2/assets/css/app.css">
    <style>
        /*初始化样式*/
        td,
        li,
        input,
        textarea,
        select,
        button {
            margin: 0;
            font-size: 13px;
            color: #555;
            padding: 0;
            font-family: "Microsoft Yahei", "Lucida Grande", Verdana, Lucida, Helvetica, Arial, 'Simsun', sans-serif;
        }
        ul {
            padding: 0;
            margin: 0;
            list-style: none;
        }
        li {
            padding: 0;
            margin: 0;
            list-style: none;
        }
        ol,
        ul,
        li {
            list-style-image: none;
            list-style-position: outside;
            list-style-type: none;
        }
        img {
            border: 0;
        }
        h1,
        h2,
        h3,
        h4,
        h5,
        h6 {
            font-size: 14px;
            padding: 0;
            margin: 0;
        }
        a {
            text-decoration: none;
            color: #555;
        }
        a:hover {
            color: #EE4F00;
        }
        html {
            overflow: -moz-scrollbars-vertical;
            height: 100%;
            width: 100%;
        }
        /*Always show Firefox scrollbar*/
        td {
            margin-left: 5px;
        }
        form,
        fieldset,
        legend,
        input,
        button,
        textarea,
        blockquote {
            margin: 0;
            padding: 0;
            font-size: 12px;
        }
        dt,
        dd,
        dl {
            padding: 0;
            margin: 0;
        }
        /*后定义样式*/
        body {
            /*background: linear-gradient(#d76570, #8c2438);*/
            background: linear-gradient(#d13d4b, #8b2537);
        }
        .card-ani {
            position: absolute;
        }
        .card-txt {
            position: absolute;
        }
        a:visited {
            color: #ffffff;
        }
        a:hover {
            color: #ffffff;
        }
        @font-face {
            font-family:"南宋书局体";src:url('fonts/南宋书局体.ttf');
        }
        .card-box-dog li {
            /*float: left;*/
            background: url(img/card/图层13拷贝.png) no-repeat top left/100% 100%;

        }
        .card-filter {
            filter: grayscale(1);
        }
    </style>
</head>
<body>
<a class="card-txt card-resize" style="top: 14px;right: 22px;color: #ffffff;"
   data-am-modal="{target: '#doc-modal-1', closeViaDimmer: 1}">兑换</a>
<div class="am-modal" id="doc-modal-1">
    <div class="am-modal-dialog" style="width:285px;height:314px;">
        <img src="img/card/erweima.png" style="width:100%;">
    </div>
</div>

<img src="img/card/左.png" alt="" class="card-ani card-resize" style="width:128px;height:115px;top:48px;left:0;">
<img src="img/card/右.png" alt="" class="card-ani card-resize" style="width:99px;height:74px;top:87px;right:0;">
<img src="img/card/烟花.png" alt="" class="card-ani card-resize" style="width:26px;top:43px;right:80px;">
<img src="img/card/烟花小.png" alt="" class="card-ani card-resize" style="width:20px;top:73px;left:144px;">
<img src="img/card/红包.png" alt="" class="card-ani card-resize" style="width:250px;height:188px;top:94px;left:32px;">
<div class="card-ani card-resize" style="width:72px;height:58px;top:115px;left:125px;">
    <div class="card-txt">
        <p style="font-size:18px;font-family:南宋书局体;color:#c90d0d;line-height:10px;">金犬贺岁</p>
        <p style="font-size:18px;font-family:南宋书局体;color:#c90d0d;line-height:10px;">恭喜发财</p>
    </div>
</div>
<img src="img/card/云下边.png" alt="" class="card-ani card-resize" style="width:128px;height:31px;top:256px;right:0;">
<img src="img/card/线_top.png" alt="" class="card-ani card-resize" style="width:316px;bottom:168px;left:0;">
<img src="img/card/线_bottom.png" alt="" class="card-ani card-resize" style="width:316px;bottom:62px;left:0;">
<img src="img/card/尊.png" alt="" class="card-ani card-resize" style="width:58px;left:18px;bottom:101px;">
<p class="card-txt card-resize" style="font-size:1px;letter-spacing:0px;color:#ffc42b;width:27px;left:31px;bottom:66px;">尊×<span class="card-num-zun" style="margin-left:-3px">0</span></p>
<img src="img/card/耀.png" alt="" class="card-ani card-resize" style="width:58px;left:92px;bottom:101px;">
<p class="card-txt card-resize" style="font-size:1px;letter-spacing:0px;color:#ffc42b;width:27px;left:105px;bottom:66px;">耀×<span class="card-num-yao" style="margin-left:-3px">0</span></p>
<img src="img/card/鼎.png" alt="" class="card-ani card-resize" style="width:58px;left:165px;bottom:101px;">
<p class="card-txt card-resize" style="font-size:1px;letter-spacing:0px;color:#ffc42b;width:27px;left:178px;bottom:66px;">鼎×<span class="card-num-ding" style="margin-left:-3px">0</span></p>
<img src="img/card/尚.png" alt="" class="card-ani card-resize" style="width:58px;left:239px;bottom:101px;">
<p class="card-txt card-resize" style="font-size:1px;letter-spacing:0px;color:#ffc42b;width:27px;left:252px;bottom:66px;">尚×<span class="card-num-shang" style="margin-left:-3px">0</span></p>
<img src="img/card/矢量智能对象.png" alt="" class="card-ani card-resize" style="width:305px;height:60px;bottom:0;">



<!--[if (gte IE 9)|!(IE)]><!-->
<script src="../../common/jquery-3.2.1.min.js"></script>
<!--<![endif]-->
<!--[if lte IE 8 ]>
<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<script src="http://cdn.staticfile.org/modernizr/2.8.3/modernizr.js"></script>
<script src="../../common/amazeui-2.7.2/assets/js/amazeui.ie8polyfill.min.js"></script>
<![endif]-->
<!--低版本jQuery备用链接-->
<!--<script src="http://code.jquery.com/jquery-1.12.4.min.js"
        integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>-->
<script src="../../common/amazeui-2.7.2/assets/js/amazeui.min.js"></script>
<script>
    $(window).resize(function(){
        console.log('当前浏览器宽度' + $(window).width() + 'px');
    });
    /*不同尺寸屏幕手机样式适配*/
    scaleW = window.innerWidth/320;
    scaleH = window.innerHeight/480;
    var resizes = document.querySelectorAll('.card-resize');
    for (var j=0; j<resizes.length; j++) {
        resizes[j].style.width = parseInt(resizes[j].style.width)*scaleW + 'px';
        resizes[j].style.height = parseInt(resizes[j].style.height)*scaleH + 'px';
        resizes[j].style.top = parseInt(resizes[j].style.top)*scaleH + 'px';
        resizes[j].style.bottom = parseInt(resizes[j].style.bottom)*scaleH + 'px';
        resizes[j].style.left = parseInt(resizes[j].style.left)*scaleW + 'px';
        resizes[j].style.right = parseInt(resizes[j].style.right)*scaleW + 'px';
        /*resizes[j].style.marginTop = parseInt(resizes[j].style.marginTop)*scaleH + 'px';
        resizes[j].style.marginBottom = parseInt(resizes[j].style.marginBottom)*scaleH + 'px';
        resizes[j].style.marginLeft = parseInt(resizes[j].style.marginLeft)*scaleW + 'px';
        resizes[j].style.marginRight = parseInt(resizes[j].style.marginRight)*scaleW + 'px';*/
    }
    /*不同尺寸屏幕手机字体大小适配*/
    var scales = document.querySelectorAll('.card-txt');
    for (var i=0; i<scales.length; i++) {
        var ss = scales[i].style;
        ss.webkitTransform =
        ss.MsTransform =
        ss.msTransform =
        ss.MozTransform =
        ss.OTransform =
        ss.transform=
        'translateX('+scales[i].offsetWidth*(scaleW-1)/2+'px)' +
        'translateY('+scales[i].offsetHeight*(scaleH-1)/2+'px)' +
        'scaleX('+scaleW+')' +
        'scaleY('+scaleH+')';
    }

    /*------点亮贺年犬选择投票个数------*/
    var finalnum,tempnum;
    var num = finalnum = tempnum= 0;
    var lis = document.getElementsByTagName("li");
    /*num:传入点亮狗狗的个数
    finalnum:最终点亮狗狗的个数
    tempnum:一个中间值*/
    function fnShow(num) {
        /*如果传入的num为0，则finalnum取tempnum的值*/
        finalnum = num || tempnum;
        for (var i = 0; i < lis.length; i++) {
            /*点亮狗狗就是移除card-filter-dark类*/
            /*lis[i].className = i < finalnum ? "light" : "";*/
            if (i < finalnum) {
                $(lis[i]).removeClass('card-filter');
            } else {
                $(lis[i]).addClass('card-filter');
            }
        }
    }
    for (var i = 1; i <= lis.length; i++) {
        lis[i - 1].index = i;
        /*鼠标经过点亮狗狗。*/
        lis[i - 1].onmouseover = function() {
            /*传入的值为正，就是finalnum*/
            fnShow(this.index);
        };
        /*鼠标离开时狗狗变暗*/
        lis[i - 1].onmouseout = function() {
            /*传入值为0，finalnum为tempnum,初始为0*/
            fnShow(0);
        };
        /*鼠标点击,同时会调用onmouseout,改变tempnum值点亮星星*/
        lis[i - 1].onclick = function() {
            console.log('点击的是第'+this.index+'个贺年犬');
            tempnum= this.index;
        }
    }
    function test() {
        $('.card-num-zun').text('1');
        console.log('尊');
    }
</script>
</body>
</html>